<#macro layout title>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>${title?default("iblog")}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="keywords" content="fly,layui,前端社区">
        <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
        <link rel="stylesheet" href="${basePath}/res/layui/css/layui.css">
        <link rel="stylesheet" href="${basePath}/res/css/global.css">
        <script src="${basePath}/res/layui/layui.js"></script>
        <script src="${basePath}/js/sockjs.js"></script>
        <script src="${basePath}/js/stomp.js"></script>
        <script src="${basePath}/js/im.js"></script>
        <script src="${basePath}/js/chat.js"></script>
    </head>
    <body>
    <#--公共-->
    <#include "/common/common.ftl"/>
    <#--头部-->
    <#include "/common/header.ftl"/>
    <#nested/>
    <#--底部-->
    <#include "/common/footer.ftl"/>

    <script>
        layui.cache.user = {
            username: '${profile.username!"游客"}'
            , uid: ${profile.id!-1}
            , avatar: '${basePath}' + '${profile.avatar!"/images/avatar.png"}'
            , experience: 83
            , sex: '${profile.sex!"未知"}'
        };
        layui.config({
            version: "3.0.0"
            , base: '${basePath}/res/mods/' //这里实际使用时，建议改成绝对路径
        }).extend({
            fly: 'index'
        }).use('fly');

        window.onload = function () {
            layui.use([], function () {
                var $ = layui.$
                var elemUser = $('.fly-nav-user');
                if (layui.cache.user.uid !== -1 && elemUser[0]) {
                    // 建立端点链接，前端会和后端建立ws双工通道
                    var socket = new SockJS("/websocket");
                    // 切换成stomp文本传输协议传输内容
                    var stompClient = Stomp.over(socket);
                    // 建立连接触发的方法
                    stompClient.connect({}, function (frame) {
                        // 订阅消息队列
                        stompClient.subscribe('/user/' + ${profile.id} + '/messCount', function (res) {
                            showTips(res.body);
                        });
                    });
                }

                // 显示未读消息
                function showTips(count) {
                    var msg = $('<a class="fly-nav-msg" href="javascript:;">' + count + '</a>');
                    var elemUser = $('.fly-nav-user');
                    elemUser.append(msg);
                    msg.on('click', function () {
                        location.href = "/user/message";
                    });
                    layer.tips('你有 ' + count + ' 条未读消息', msg, {
                        tips: 3
                        , tipsMore: true
                        , fixed: true
                    });
                    msg.on('mouseenter', function () {
                        layer.closeAll('tips');
                    })
                }
            });
        };
    </script>
    </body>
    </html>
</#macro>